import React, { Component } from "react";
import Img from "../../assest/images/dl.png";
import styles from "./My.module.scss";
import {renderRoutes} from "react-router-config";

class My extends Component {
    constructor(props){
        super(props)
        this.state={
          activeTab:props.match.url.slice(1)||""
        }
      }
  handleClick(){
    this.props.history.push("/my/login");
  };
  handleCllect=()=>{
    this.props.history.push("my/collect");
  }
  handleBook=()=>{
    this.props.history.push("my/book");
  }
  handleStar=()=>{
      this.props.history.push("my/star")
  }
handleBack=()=>{
    this.props.history.push("my/back")
}
handleInfo=()=>{
    this.props.history.push("my/info")
}
handleUs=()=>{
    this.props.history.push("my/us")
}
handleSet=()=>{
    this.props.history.push("my/set")
}
  render() {
    return (
        <div className={styles.wrapper}>
            {renderRoutes(this.props.route.routes)}
            {/*{renderRoutes(this.props.route.routes)}*/}
            <div className={styles.myContent}>
                <div className={styles.myTop} onClick={()=>{this.handleClick()}}>
                    <div className={styles.imgLeft}>
                        <img src={Img} alt="" />
                    </div>
                    <div className={styles.mid}>登录/注册</div>
                    <div className={styles.right}>
                        <i className="iconfont icon-youjiantou"></i>
                    </div>
                </div>
                <div className={styles.myContentListTop}>
                    <div className={styles.collect} onClick={this.handleCllect}>
                        <div className={styles.collectLeft}>
                            <i className="iconfont icon-shoucang"></i>
                        </div>
                        <div className={styles.collectMid} >资源收藏夹</div>
                        <div className={styles.collectRight}>
                            <i className="iconfont icon-youjiantou"></i>
                        </div>
                    </div>
                    <div className={styles.book} onClick={this.handleBook}>
                        <div className={styles.bookLeft}>
                            <i className="iconfont icon-0-25"></i>
                        </div>
                        <div className={styles.bookMid}>我的图书</div>
                        <div className={styles.bookRight}>
                            <i className="iconfont icon-youjiantou"></i>
                        </div>
                    </div>
                </div>
                <div className={styles.myContentmid}>
                    {/* 走进天星 */}
                    <div className={styles.goStar} onClick={this.handleStar}>
                        <div className={styles.sartLeft}>
                            <i className="iconfont icon-zuoyeguanli"></i>
                        </div>
                        <div className={styles.starMid}>走进天星</div>
                        <div className={styles.starRight}>
                            <i className="iconfont icon-youjiantou"></i>
                        </div>
                    </div>
                    {/* 我的反馈 */}
                    <div className={styles.backSay} onClick={this.handleBack}>
                        <div className={styles.backSayLeft}>
                            <i className="iconfont icon-xinbaniconshangchuan-"></i>
                        </div>
                        <div className={styles.backSayMid}>
                            我的反馈
                        </div>
                        <div className={styles.backSayRight}>
                            <i className="iconfont icon-youjiantou"></i>
                        </div>
                    </div>
                    {/* 我的消息 */}
                    <div className={styles.myInfo} onClick={this.handleInfo}>
                        <div className={styles.myInfoLeft}>
                            <i className="iconfont icon-xiaoxi"></i>
                        </div>
                        <div className={styles.myInfoMid}>
                            我的消息
                        </div>
                        <div className={styles.myInfoRight}>
                            <i className="iconfont icon-youjiantou"></i>
                        </div>
                    </div>
                    {/* 关于我们 */}
                    <div className={styles.aboutUs} onClick={this.handleUs}>
                        <div className={styles.aboutUsLeft}>
                            <i className="iconfont icon-guanyuwomen"></i>
                        </div>
                        <div className={styles.aboutUsMid}>
                            关于我们
                        </div>
                        <div className={styles.aboutUsRight}>
                            <i className="iconfont icon-youjiantou"></i>
                        </div>
                    </div>
                </div>
                {/* footer */}
                <div className={styles.footer}>
                    <div className={styles.setting} onClick={this.handleSet}>
                        <div className={styles.settingLeft}>
                            <i className="iconfont icon-shezhi"></i>
                        </div>
                        <div className={styles.settingMid}>
                            设置
                        </div>
                        <div className={styles.settingRight}>
                            <i className="iconfont icon-youjiantou"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    );
  }
}

export default My;
